<template>
  <div class="info">
    <div style="text-align:center;padding:50px 0 40px">
      <img class="imgUrl" :src="userInfo.headImg" alt />
    </div>
    <div class="main">
      <div class="flex">
        <span class="flex-1 leftName">昵称</span>
        <span class="rightName">{{userInfo.realName?userInfo.fullName:userInfo.nickName}}</span>
      </div>
      <div class="flex" style="padding-top:20px">
        <span class="flex-1 leftName">手机号</span>
        <span class="rightName" v-if="userInfo && userInfo.phone">{{userInfo.phone}}</span>
      </div>
      <div class="flex" style="padding-top:20px" v-if="userInfo.employeeNo">
        <span class="flex-1 leftName">理财师编号</span>
        <span class="rightName">{{userInfo.employeeNo}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      // userInfo: null
    };
  },
  mounted() {
    console.log(this.userInfo, "userInfouserInfo");
  },
  computed: {
    ...mapGetters(["userInfo"])
  }
};
</script>
<style lang="less" scoped>
.info {
  padding: 0 15px;
  .imgUrl {
    width: 90px;
    height: 90px;
    border-radius: 50%;
  }
  .main {
    padding: 21px 0 20px;
    border-top: 0.5px solid #e6e6e6;
    border-bottom: 0.5px solid #e6e6e6;
    font-size: 14px;
    .leftName {
      color: #020604;
    }
    .rightName {
      color: #6b6b6b;
    }
  }
}
</style>